<template>
  <div class="dynamic-container">
    <!-- 面包屑导航 -->
    <nav class="breadcrumb-nav">
      <a href="#" class="nav-link">首页</a>
      <span class="separator">/</span>
      <span class="current-page">信息公告</span>
    </nav>

    <!-- 动态列表 -->
    <div class="list-outer-container">
      <div class="dynamic-list-wrapper">
        <table class="dynamic-table">
          <thead>
            <tr class="table-header-row">
              <th class="table-header serial-number">序号</th>
              <th class="table-header title-header">动态标题</th>
              <th class="table-header publish-time">
                发布时间
                <span class="sort-arrow"></span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(item, index) in displayedList"
              :key="item.id || index"
              class="table-row"
            >
              <td class="table-data serial-number">
                <img
                  src="/public/images/主页/u19.png"
                  alt="序号图标"
                  class="serial-icon"
                />
              </td>
              <td class="table-data title-content">
                <div class="title-wrapper" >
                  <router-link :to="'/xxggxqy'" class="title-text" style="text-decoration: none;">
                    {{ item.title }}
                  </router-link>
                </div>
              </td>
              <td class="table-data publish-time">
                {{ item.publishTime }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const dynamicList = ref([
  {
    id: 1,
    title: "【麻城市中心】麻城经济开发区谌家园小学建设项目招标预公告",
    publishTime: "2022-04-13",
  },
  {
    id: 2,
    title: "【麻城市中心】麻城市农村公路管理局招标计划",
    publishTime: "2022-04-13",
  },
  {
    id: 3,
    title: "【麻城市中心】麻城经济开发区谌家园小学及附属幼儿园建设项目招标预公告",
    publishTime: "2022-04-13",
  },
  {
    id: 4,
    title: "【汉川市中心】汉川电厂四期扩建工程电力和水管网线路迁改建设工程",
    publishTime: "2022-04-13",
  },
  {
    id: 5,
    title:
      "【红安县中心】红安县2023年度小型水库安全监测项目设计采购施工总承包(EPC)",
    publishTime: "2022-04-13",
  },
  { id: 6, title: "海头镇宅基地土地发包项目", publishTime: "2022-04-13" },
  { id: 7, title: "先锋创业大楼（515-1室）60㎡", publishTime: "2022-04-13" },
  {
    id: 8,
    title: "烟台市福山区人民政府清洋街道办事处2023年04（至）05月政府采购意向",
    publishTime: "2022-04-13",
  },
  {
    id: 9,
    title: "同江市实验幼儿园2023年05月政府采购意向",
    publishTime: "2022-04-13",
  },
  {
    id: 10,
    title: "侯马市第二中学校2023年4月至12月政府采购意向-城乡义务教育补助省级配套经费",
    publishTime: "2022-04-13",
  },
  {
    id: 11,
    title:
      "太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目",
    publishTime: "2022-04-13",
  },
  {
    id: 12,
    title:
      "侯马市第二中学校2023年4月至11月政府采购意向-城乡义务教育补助经费中央资金",
    publishTime: "2022-04-13",
  },
  {
    id: 13,
    title:
      "太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目",
    publishTime: "2022-04-13",
  },
  {
    id: 14,
    title:
      "侯马市第二中学校2023年4月至8月政府采购意向-城乡义务教育补助经费中央资金",
    publishTime: "2022-04-13",
  },
  {
    id: 15,
    title: "【次氯酸钠贮存罐修理】采购公告 附件",
    publishTime: "2022-04-13",
  },
]);

const displayedList = computed(() => dynamicList.value);
</script>

<style scoped>
/* 基础容器样式 */
.dynamic-container {
  width: 100%;
}
.list-outer-container {
  background: white;
  border-radius: 0.8rem;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
/* 面包屑导航 */
.breadcrumb-nav {
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
}

.nav-link {
  color: inherit;
  transition: color 0.3s;
}

.nav-link:hover {
  color: #165dff;
}

.separator {
  margin: 0 0.5rem;
}

.current-page {
  color: #25262a;
  font-weight: 500;
}

/* 动态列表容器 */
.dynamic-list-wrapper {
  background: transparent; /* 移除原有白色背景 */
  border-radius: 0.5rem;
  overflow: hidden;
  /* 移除原有 box-shadow */
}
/* 表格样式 */
.dynamic-table {
  width: 100%;
  background: white;
  border-collapse: collapse;
}

/* 表头样式 */
.table-header-row {
  background-color: hwb(150 95% 2%);
  font-size: 0.875rem;
}

.table-header {
  text-align: left;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle; /* 添加垂直对齐方式 */
}

/* 表格数据行 */
.table-row {
  border-top: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
  transition: background-color 0.3s;
}

.table-row:hover {
  background-color: #f7f7f7;
}

.table-data {
  padding: 1rem 1.5rem;
  vertical-align: middle;
}

/* 序列号列 */
.serial-number {
  width: 80px;
}

.serial-icon {
  width: 1.2rem;
  margin-top: 0.5rem;
  height: 1.2rem;
  padding-right: 70px;
  object-fit: contain;
}

/* 标题列 */
.title-content {
  min-width: 400px;
}

.title-wrapper {
  display: flex;
  font-size: 0.875rem;
  align-items: flex-start;
}

.title-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: color 0.3s;
  word-break: break-word;
}

.title-text:hover {
  color: #165dff;
}

/* 发布时间列 */
.publish-time {
  width: auto; /* 让宽度根据内容自适应 */
  max-width: 150px; /* 设置最大宽度防止内容过长撑开表格 */
  color: #666;
  font-size: 0.875rem;
  text-align: left; /* 确保内容左对齐 */
  padding-right: 120px;
}
.sort-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  margin-left: 5px;
  vertical-align: middle;
  position: relative;
}
.sort-arrow::before {
  content: "";
  position: absolute;
  top: -5px;
  border-bottom: 5px solid #666;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.sort-arrow::after {
  content: "";
  position: absolute;
  bottom: -5px;
  border-top: 5px solid #666;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.table-header.publish-time:hover .sort-arrow {
  opacity: 0.8;
}
/* 响应式设计 */
@media (max-width: 768px) {
  .dynamic-container {
    width: 100%;
    padding: 0 0.5rem;
  }

  .title-content {
    min-width: 280px;
  }

  .table-header,
  .table-data {
    padding: 0.75rem 1rem;
  }

  .publish-time {
    width: auto;
    max-width: 120px;
  }
}
</style>
